<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;">
		<el-tabs v-model="tabIndex" @tab-click="handleClick">
			<el-tab-pane v-for="(tab,tabI) in tabbars" :key="tabI" :label="tab.name">
				<buttonSearch ref="buttonSearch" placeholder="要搜索的商品名称" @search="searchEvent">
					<!-- 左边 -->
					<template #left>
						<router-link :to="{name:'shop_goods_create'}" class="mr-2">
						<el-button type="success" size="mini">发布商品</el-button>
					</router-link>
						<el-button type="danger" size="mini">批量删除</el-button>
					</template>
					<!-- 高级搜索表单 -->
					<template #form>
						<el-form inline ref="form" :model="form" label-width="80px">
							<el-form-item label="商品名称" class="mb-0">
								<el-input v-model="form.name" placeholder="商品名称" size="mini"></el-input>
							</el-form-item>
							<el-form-item label="商品编码" class="mb-0">
								<el-input v-model="form.code" placeholder="商品编码" size="mini"></el-input>
							</el-form-item>
							<el-form-item label="商品类型" class="mb-0">
								<el-select size="mini" v-model="form.type" placeholder="请选择商品类型">
									<el-option label="区别1" value="sh"></el-option>
									<el-option label="区别2" value="bj"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="商品分类" class="mb-0">
								<el-input v-model="form.category" placeholder="商品分类" size="mini"></el-input>
							</el-form-item>
							<el-form-item class="mb-0">
								<el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
								<el-button size="mini" @click="clearSearch">清空搜索条件</el-button>
							</el-form-item>
						</el-form>
					</template>
				</buttonSearch>
				
				<!-- 商品列表 -->
				<el-table border class="mt-3"
				    ref="multipleTable"
				    :data="tableData"
				    tooltip-effect="dark"
				    style="width: 100%"
				    @selection-change="handleSelectionChange">
				    <el-table-column
				      type="selection"
				      width="40" align="center">
				    </el-table-column>
					<el-table-column
						label="商品"
						width="300">
						<template slot-scope="scope">
							<div class="media">
							<img class="mr-3" style="width: 60px;height: 60px;" :src="scope.row.cover">
							<div class="media-body">
								<p class="mt-0">{{scope.row.title}}</p>
								<p class="mb-0">分类：{{scope.row.category.name}}</p>
								<p class="mb-0">时间：{{scope.row.create_time}}</p>
							</div>
							</div>
						</template>
		  			</el-table-column>
					  <el-table-column
					  align="center"
					   prop="sale_count"
					   width="70"
					   label="实际销量">
					 </el-table-column>
					 <el-table-column
					   prop="status"
					   align="center"
					   label="商品状态"
					   width="60">
					   <template slot-scope="scope">
						   <span class="badge" :class="scope.row.status ? 'badge-success' : 'badge-danger'">{{scope.row.status ? '上架' : '仓库'}}</span>
					   </template>
					 </el-table-column>
					 <el-table-column
					   prop="status"
					   align="center"
					   width="120"
					   label="审核状态">
					   <template slot-scope="scope">
						   <div class="d-flex flex-column" v-if="!scope.row.ischeck">
							   <el-button
							   type="success" size="mini"
							   @click="checkGoods(scope.row,1)"
							   plain>审核通过
							   </el-button>
							   
							   <el-button class="ml-0 mt-2"
							   type="danger" size="mini"
							   @click="checkGoods(scope.row,2)"
							   plain>审核拒绝
							   </el-button>
						   </div>
						   <span v-else>{{scope.row.ischeck === 1? '通过' : '拒绝'}}</span>
					   </template>
					 </el-table-column>
					 <el-table-column
					   prop="stock"
					   align="center"
					   width="90"
					   label="总库存">
					 </el-table-column>
					   <el-table-column
					   prop="pprice"
					   align="center"
					   label=" 价格(元)"
					   width="120"
					   >
					   <template slot-scope="scope">
						   <span class="text-danger">￥{{scope.row.min_price}}</span>
						   <span>/</span>
						   <span class="text-muted">￥{{scope.row.min_oprice}}</span>
					   </template>
					 </el-table-column>
				  </el-table>
			</el-tab-pane>

		</el-tabs>
	</div>
</template>

<script>
	import buttonSearch from '@/components/common/button-search.vue'
	export default {
		components: {
			buttonSearch
		},
		data() {
			return {
				tabIndex: 0,
				tabbars: [{
						name: "全部",
						key: "all"
					},
					{
						name: "审核中",
						key: "checking"
					},
					{
						name: "出售中",
						key: "saling"
					},
					{
						name: "已下架",
						key: "off"
					},
					{
						name: "库存预警",
						key: "min_stock"
					},
					{
						name: "回收站",
						key: "delete"
					},
				],
				superSearch: false,
				form: {
					name: '',
					code: '',
					type: '',
					category: ''
				},
				tableData: [{
					id:1,
					cover: 'https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg',
						create_time: '2016-05-03',
				          name: '王小虎',
				          sale_count: 50,
				          status: 1,
				          ischeck: 1,
				          min_price: 120,
				          min_oprice: 150,
				          stock: 110,
				          category: {
							name: '金沙江路'
						  }
				        }],
				        multipleSelection: []
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 搜索事件
			searchEvent(e = false) {
				// 简单搜索
				if (typeof e === 'string') {
					return console.log('简单搜索', e)
				}
				// 高级搜索
				console.log('搜索事件')
			},
			clearSearch() {
				this.form = {
					name: '',
					code: '',
					type: '',
					category: ''
				}
				this.$refs.buttonSearch[this.tabIndex].closeSuperSearch()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			checkGoods(item,ischeck){
				// this.layout.showLoading()
				// this.axios.post('/admin/goods/'+item.id+'/check',{
				// 	ischeck
				// },{ token:true }).then(res=>{
				// 	this.getList()
				// 	this.$message({
				// 		type:"success",
				// 		message:"操作成功"
				// 	})
				// 	this.layout.hideLoading()
				// }).catch(err=>{
				// 	this.layout.hideLoading()
				// })
			}
		}
	}
</script>

<style>
</style>
